小功能

2023-04-19 02:08| 来源: 网络整理| 查看: 265

「这是我参与2022首次更文挑战的第8天，活动详情查看：2022首次更文挑战」。

一、功能介绍

点击选择WiFi生成二维码，使用手机相机扫描二维码，连接WiFi，（当然事先是把密码写进了代码里，只是这样更方便的可以使用WiFi连接，不需要输入密码，避免老被人问WiFi密码，哈哈哈）

二、安装依赖 2.1 需要引入jquery

在线引入

复制代码

也可以下载安装包到本地引入

2.2 引入qrcode

这里我是下载安装包到本地，百度一下就有了

复制代码三、项目实战 3.1 分析

拿到一个项目首先最重要的就是进行分析，只要分析的够彻底，写代码就不会太难

先思考我们都需要做什么？首先也是最基础的页面需要呈现，这里我做的一个比较简约的一个页面，连接WiFi也是为了方便不需要什么花里胡哨的操作其次就是最重要的部分js交互部分

首先分为这两大步，具体分析下面具体介绍，

四、页面设计

页面设计我想应该难不倒大家，这是最基础部分，如果不会，建议好好学习一下html和css

首先分析页面，你心里大致要有个想法，想要做个什么样的页面，也可以拿笔画下来，更直观一些，至少有个大致的方向，然后就是进行页面分析，别看页面简单，分析哪都适用，直接上代码：

html 扫码登陆可用Wi-Fi 复制代码

html比较简单，初学者看看就好了，来看看css代码：这里用的是sass代码，不会sass的小伙伴，可以看看我的sass用法介绍，其实和css差不太多，都能看的懂

css / sass $head_bg:#fff; $canvas_bg:#fff; $body_bg:#fff; $wifi_bg_all:rgb(245, 245, 245); $wifi_bg:#fff; $item_shadow_color:rgba(#f39800, 0.15); main { width: 100%; } .wifi { max-width: 1000px; min-width: 800px; margin: auto; border-radius: 12px; h3 { text-align: center; font-size: 28px; font-weight: 400; padding: 20px 0; } &_logo { background-color: $head_bg; // height: 600px; margin: 0px auto; padding-bottom: 120px; canvas { display: block; margin: 0 auto; border: 5px dashed #BDC3C7; background-color: $canvas_bg; box-shadow: 2px 2px 10px rgba($color: #000000, $alpha: 0.2); } img { display: block; margin: 0 auto; } } &_content { background-color: $body_bg; &_info { width: 88%; margin: 0 auto; padding: 20px; border: 1px solid #0000; border-radius: 12px; background-color: $wifi_bg_all; transform: translate( 0, -100px); p { color: #666; font-size: 18px; margin-bottom: 10px; } } ul { max-height: 255px; overflow: scroll; overflow-x: hidden; margin: 0 auto; border: 1px solid #0000; border-radius: 12px; display: flex; flex-wrap: wrap; justify-content: space-around; /* 整个滚动条 */ &::-webkit-scrollbar { width: 2px; background-color: #ffffff; margin-left: 5px; } /* 滚动条轨道 */ &::-webkit-scrollbar-track { /* 阴影 */ -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); background-color: #ffffff; } /* 滚定条滑块 */ &::-webkit-scrollbar-thumb { border-radius: 30px; background-color: #615b5b49; } &:hover::-webkit-scrollbar { display: block; } } &_item { width: 28%; height: 60px; line-height: 60px; text-align: center; font-size: 18px; font-weight: 600; color: #333; border-radius: 8px; margin-top: 20px; padding: 0 20px; cursor: pointer; background-color: $wifi_bg; box-shadow: 2px 2px 2px rgba($color: #000000, $alpha: 0.2); p { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } &:hover { box-shadow: 0px 1rem 2rem 0px rgba($item_shadow_color, 0.15); transform: translate(0, -5px); transition-delay: 0s !important; } } } } 复制代码

因为结构比较简单代码也相对简单很多，主要讲讲里面的注意点，头部的生成二维码的位置，使用了qrcode插件后，会自动生成一个canvas标签，所以可以给设置样式，生成二维码之后会生成一个img的标签，所以这里大小不能写死，需要根据js里的宽高来变化，

css里使用了一个动画效果，鼠标经过WiFi有个上浮效果

&:hover { box-shadow: 0px 1rem 2rem 0px rgba($item_shadow_color, 0.15); transform: translate(0, -5px); transition-delay: 0s !important; } 复制代码

还有一个是滚动条的样式设置，这是网上找的，大家网上也能找得到，感兴趣可以了解

/* 整个滚动条 */ &::-webkit-scrollbar { width: 2px; background-color: #ffffff; margin-left: 5px; } /* 滚动条轨道 */ &::-webkit-scrollbar-track { /* 阴影 */ -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); background-color: #ffffff; } /* 滚定条滑块 */ &::-webkit-scrollbar-thumb { border-radius: 30px; background-color: #615b5b49; } 复制代码五、页面交互

这里详细介绍分析的重要性，这个功能最核心的也就是js部分了

5.1 分析

首先想想我们需要做什么，我们需要先动态生成wifi按钮，这需要什么，需要一个数组来存放wifi的名称，才能成功动态生成按钮，然后我们的功能是什么，扫码连接，不需要输入密码，那肯定这个数组包含名称，也需要一个密码的数组，这时候就可以用一个对象将wifi的名称和密码存放在一起，这就很清晰了。然后最后才是生成二维码，而生成二维码需要一个固定格式的字符串，也就是下面的text，所以我们要通过循环，将账号密码传入，通过字符串拼接，变成符合格式的字符串传出，我们用一个对象来存放，最后传入生成二维码的函数里面，就将所有数据关联起来了，这么说可能有点乱，每个人思路都不一样，但一定要做的就是分析，这个对写代码很有帮助，结合代码看更容易理解：

5.2 数组的创建

首先我们需要一个对象或两个数组，来存放wifi的账号和密码，具体就不展示了

const names = ['wifi', 'wifi', 'wifi', 'wifi', 'wifi', 'wifi', 'wifi', 'wifi', 'wifi', 'wifi', ] 复制代码

数组格式应该很简单，然后创建一个map，就是对象，来将传出的格式的字符串接收

这里解释一下：首先for循环数组，因为wifiMap是个对象，所以是以key：value的形式存放数据，key的值就是wifi的名称，所以是wifiMap[name[i]] ,而value的值就是，下面createWifiOptions加工后传出的固定格式的字符串,这样wifiMap里的数据就是以“wifi名称”：“固定格式的字符串”这种形式存在

搞定了接下来就使用数据就好了，因为前面都分析过了

5.3 WiFi按钮的动态生成

第一张图上有很多wifi的按钮，这个可以使用js来动态生成

function createLielement(el, options) { if (typeof el === 'string') { el = document.getElementById(el) } if (!el || !options || !Array.isArray(options)) return let html = '' options.forEach(item => { html += `${item}` }) el.innerHTML = html } 复制代码

首先一行一行看，第一行是一个函数传入了两个参数，第一个参数是生成元素的父元素的id，第二个参数是一个数组，存放你要显示的wifi名称，也就是names数组，这样代码就清晰了，下面使用了forEach循环，将元素生成，然后使用innerHTML父元素，来动态生成这些元素

5.4 了解QRCode插件的使用 //生成二维码 const qr = document.querySelector('#qr') const wifi_items = document.querySelector('.wifi_content_items') wifi_items.addEventListener('click', (e) => { if (e.target.className === 'wifi_content_item') { const { type } = e.target.dataset makeqr(wifiMap[type]) } }) //创建QRCode对象 const qrcode = new QRCode(qr, defaultOptions); //清理--生成二维码 function makeqr(text) { qrcode.clear() qrcode.makeCode(text) } 复制代码

首先使用 new QRCode 创建一个qrcode对象，第一个参数是挂载的位置，就是二维码要生成在哪里，的id挂载就好了，第二个参数是一个对象里面有一些参数，最重要的就是text，这决定了你生成的二维码的样子

const defaultOptions = { width: 320, height: 320, colorDark: "#000000", colorLight: "#ffffff", correctLevel: QRCode.CorrectLevel.H } 复制代码

这里把对象里的参数单独抽出来，创建一个对象存放，到时候只需要修改这个对象里的数据就可以，不需要去代码里面修改内容，然后把这个对象传入就可以了

const qrcode = new QRCode(qr, defaultOptions); //qr是html标签的id 复制代码

这里就完成了qrcode的创建，里面包含两个方法

qrcode.clear() //清除之前生成的二维码 qrcode.makeCode(text) //生成新的二维码，传入text值，决定二维码的样子复制代码

这样就html里面就会自动生成一个canvas标签，在你挂载的id元素内部

最后将前面写好的数据wifiMap传入makeqr(wifiMap[type])，就相当于text，传入就可以自动生成二维码了，扫码可以不需要输入密码，初学者写的不好，可以提提意见。

后续添加了js代码的优化和详细介绍，可以参考小功能--扫描二维码自动连接WiFi（扩展）

本章完

【本文地址】

公司简介

联系我们